<template>
    <div>
        <div class="live-video-top">
            <div class="avatar">
                <el-avatar :size="64" src="https://q1.qlogo.cn/g?b=qq&nk=2770063826&s=100"></el-avatar>
                <div class="live-avatar-pendant"></div>
            </div>
            <div class="live-info">
                <div class="live-info-detail">
                    <div class="live-author">
                        <div class="author">Jixer</div>
                        <div>关注</div>
                    </div>
                    <div>

                    </div>
                </div>
                <div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "live-video"
}
</script>

<style scoped>
.live-video-top {
    background-image: url(./images/head.png);
    border: none !important;
    padding: 17px;
    height: 98px;
    background-color: white !important;
    border-radius: 12px 12px 0 0;
    box-sizing: border-box;
    display: flex;
    position: relative;
}

.avatar {
    display: block;
    width: 64px;
    height: 64px;
    cursor: pointer;
}

.live-avatar-pendant {
    height: 88px;
    width: 88px;
    background-image: url(./images/avatar-pendant.png);
    position: absolute;
    top: 8px;
    left: 6px;
}

.live-info {
    margin-left: 17px;
    flex: 1;
    align-self: center;
}

.live-info-detail {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.live-author {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.author {
    font-size: 16px;
    color: rgba(255,255,255,1);
    transition: color .5s;
    margin-left: 0;
    line-height: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
</style>